<template>
  <div>
    <div class="log">
      <h4>登录账号</h4>
      <span>虾米-严选商城欢迎您</span>
      <p>
        <input type="tel" placeholder="手机号码" v-model="tel" />
        <span style="display: none;">必填</span>
        <van-icon name="phone-o" />
      </p>
      <p>
        <input v-model="pwd" type="password" placeholder="密码" v-if="hid" />
        <input v-model="pwd" type="text" placeholder="密码" v-else />
        <van-icon @click="show" name="closed-eye" v-if="hid" />
        <van-icon @click="show" name="eye-o" v-else />
      </p>
      <button @click="login">登录</button>
      <span>忘记密码</span>
      <p class="reg">
        <a  @click="register">还没有账号？立即注册</a>
      </p>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      hid: true,
      pwd: "",
      tel: "",
      p1:""
    };
  },
  methods: {
    login() {
      var data = {
        "mobile": this.tel,
        "pwd": this.pwd
      };
      this.http.post( "https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey",qs.stringify(data)
        ).then(msg => {
          console.log(msg);
          if (msg.data.msg == "success") {
            localStorage.setItem("token", msg.data.data.token);
            if(this.p1!=""){
              this.$router.push(this.p1)
            }else{
              //判断从路由对象里来
              this.$router.push("/home/user");
            }
          } else {
            alert("用户名或者密码不对");        
          }
        });
    },
    show() {
      this.hid = !this.hid;
    },
    register() {
      this.$router.push({ path:"/zhuce" })
    },
    created () {
      console.log(this.$route)
    },
    mounted () {},
    beforeRouteEnter(to, from, next){
       // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(from);
    next(xm=>{
      //通过xm访问组件实例
      xm.p1=from.path
    })
    }
    // login() {
    //   // this.$router.push({ path:"/reg" })
    // }
  }
};
</script>

<style scoped>
.log {
  width: 5rem;
  height: 6.5rem;
  border: 1px solid rgb(235, 232, 232);
  margin: 0 auto;
  margin-top: 0.1rem;
  padding-top: 0.2rem;
}
h4 {
  width: 5.2rem;
  text-align: center;
  margin-bottom: 0.2rem;
  font-size: 0.2rem;
}
p {
  width: 3.8rem;
  height: 0.6rem;
  margin-top: 0.2rem;
  font-size: 0.18rem;
  background: rgb(233, 231, 247);
  margin-left: 0.6rem;
  border-radius: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0rem 0.3rem 0 0;
}
p input {
  width: 3rem;
  border: cornsilk;
  background: rgba(0, 0, 0, 0);
  text-indent: 0.3rem;
}
input ::placeholder {
  color: #000000;
}
span {
  width: 5.2rem;
  text-align: center;
  display: inline-block;
  font-size: 0.16rem;
  color: #807e7e;
}
button {
  width: 2.91rem;
  height: 0.6rem;
  border-radius: 0.06rem;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.2rem;
  color: white;
  letter-spacing: 0.06rem;
  margin-left: 1.1rem;
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
  border: #bb87f6;
}
.reg {
  background: #ffffff;
  text-align: center;
  text-indent: 0;
}
.reg a {
  width: 3.8rem;
  height: 0.5rem;
  color: #5ea6f8;
  text-decoration: underline;
  text-align: center;
}
</style>